<!-- Copyright 2017 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================-->
<link rel="import" href="../node_modules/@bower_components/polymer/polymer.html">
<link rel="import" href="../node_modules/@bower_components/paper-button/paper-button.html">
<link rel="import" href="../node_modules/@bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../node_modules/@bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../node_modules/@bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../node_modules/@bower_components/paper-item/paper-item.html">
<link rel="import" href="../node_modules/@bower_components/paper-dialog/paper-dialog.html">
<link rel="stylesheet" href="style.css">

<dom-module id="teachablegaming-demo">
<style>

#activationsContainer{
  text-align: center;
}

::content .dosbox-container {
  width: 640px;
  height: 400px;
  margin: 12px;
}
::content .dosbox-start {
  /*controls label appearance*/
  padding: 12px;
  background: rgba(255,255,255,0.9);
  margin: auto 50px;
  border-radius: 5px;
  color: #777777;
  border: 1px solid #cccccc;
  font-weight: 300;
  text-decoration: none;
}
paper-button.reset-button {
  background-color: var(--paper-grey-300);
}

label > input{
  visibility: hidden;
  position: absolute;
}
label > input + div > img {
  cursor:pointer;
}
label > input:checked + div > img {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
</style>
<!--Outer container-->
<div class="mdl-layout mdl-js-layout">
  <!-- main content-->
  <main class="mdl-layout__content">
    <template>
      <!-- Banner -->
      <div class="mdl-grid banner">
        <div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
        <div class="mdl-cell mdl-cell--10-col mdl-cell--8-col-tablet mdl-cell--4-col-phone banner-text">
          <div class="mdl-typography--display-4">Cam Arcade</div>
          <div class="mdl-typography--display-1 banner-subtitle">Play classic DOS games with your webcam and a neural network!</div>
        </div>
        <div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      </div>
      <!--Body-->
      <div class="mdl-grid mdl-grid--no-spacing description">
        <div class="mld-cell mdl-cell--1-offset-desktop mdl-cell--4-col mdl-cell--6-col-tablet mdl-cell--4-col-phone mdl-typography--body-1 description-text">
          Cam Arcade lets you control classic DOS games through webcam gestures instead of (or in conjunction with)
          keyboard strokes. Train a local neural network in your browser to invoke any keystroke by wiggling your fingers, pointing in different directions, or using hand gestures. <br> <br> For even more fun, get your friends together and choreograph an ensemble to invoke different keystrokes!
        </div>
        <div class="mld-cell mdl-cell--2-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-typography--body-1 credits">
          Inspired by <a href="https://teachablemachine.withgoogle.com/"</a>Teachable Machine</a>.<br>
          Games provided by <a href="https://js-dos.com/"</a>js-dos</a>.<br>
          Check out <a href="https://github.com/PAIR-code/deeplearnjs/tree/master/demos/teachable_gaming">the code behind this demo</a>.
          <br><br>
          For more information on how to train your network, visit the <a href="https://teachablemachine.withgoogle.com/"</a>Teachable Machine</a> site.<br>
        </div>
      </div>
      <div class="mdl-grid mdl-grid--no-spacing">
        <div class="mld-cell mdl-cell--1-offset-desktop mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--4-col-phone mdl-typography--body-1 performance-note">
          All training occurs locally on your device and in your browser. That means, your images don't get sent anywhere. JS-dos is resource heavy - for a seamless experience, use a web browser on your desktop/laptop.
        </div>
      </div>
      <div class="holder mdl-grid mdl-grid--no-spacing">
        <!--Step 1-->
        <div class="mdl-cell mdl-cell--10-col mdl-cell--1-offset tutorial mdl-typography--headline mdl-cell--8-col-tablet mdl-cell--4-col-phone">
          1. Pick a game to play
        </div>
        <!-- Select game from image buttons -->
        <div class="mdl-cell mdl-cell--10-col mdl-cell--1-offset game-picker mdl-cell--8-col-tablet mdl-cell--4-col-phone">
          <div class="mdl-grid game-card-grid">
            <template is="dom-repeat" items="[[games]]">
              <label class="mdl-card mdl-shadow--2dp mdl-js-ripple-effect">
                <input type="radio" name="game" value="[[item.name]]" id="[[getGameRadioId(index)]]" on-click="onGameRadioClick" checked="[[shouldRadioInitToChecked(index)]]"/>
                <div class="image_and_label">
                  <img class="thumbail" src="[[item.img]]">
                  <div class="image_label">[[item.name]]</div>
                </div>
              </label>
            </template>
          </div>
        </div>
        <div class="mdl-cell mdl-cell--1-offset-desktop mdl-cell--5-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone">
          <div class="step-2 mdl-grid">
            <!-- Step 2 -->
            <div class="tutorial mdl-typography--headline mdl-cell mdl-cell--12-col">
              2. Train with your webcam
            </div>
            <!-- training controls -->
            <div class="controller mdl-cell mdl-cell--12-col">
              <!-- webcam box -->
              <div id="inputContainer">
                <div id="imgContainer">
                  <video autoplay="true" id="webcamVideo" width="227" height ="227" ></video>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Step 3 -->
        <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-cell--order-4-tablet mdl-cell--order-4-phone">
          <div class="step-3 mdl-grid">
            <div class="tutorial mdl-typography--headline mdl-cell mdl-cell--12-col">
              3. Start Playing!
            </div>
            <!-- js-dos screen -->
            <div id="dosbox" class="mdl-typography--body-1 mdl-cell mdl-cell--12-col"></div>
            <!-- Enable Webcam control -->
            <paper-toggle-button id="predictswitch" class="mdl-typography--caption">
            Start using the webcam to control the game!
          </paper-toggle-button>
          <!-- fps info -->
          <div class="statsholder mdl-typography--caption " >
            <div class="statsholder-key">FPS:</div><div id="predfps" class="statsholder-val"></div>
          </div>
          <!-- fps info -->
          <template is="dom-if" if="[[predicting]]">
            <div class="statsholder statsholder-key mdl-typography--caption">
              <div>Time for Prediction: </div>
              <div id="predperf" class="statsholder-val"></div>
              <div style="padding-left: 4px;">ms</div>
            </div>
          </template>
        </div>
      </div>
      <div class="mdl-grid keyboard-controls">
        <div class="controls mdl-cell mdl-cell--1-offset-desktop mdl-cell--11-col-desktop mdl-cell--8-col-tablet mdl-cell--4--col-phone mdl-cell--order-3-tablet mdl-cell--order-3-phone">
          <template is="dom-repeat" items="[[keyEventData]]">
            <div class="control mdl-card">
              <div class="mdl-typography--body-1">[[item.key]]</div>
              <div class="mdl-typography--caption">[[getKeyText(item.text)]]</div>
              <div class="indicator" id="[[getKeyIndicatorId(index)]]"></div>
              <paper-toggle-button class="mdl-typography--caption" id="[[getKeyToggleId(index)]]" on-change="toggle">Train (<span id="[[getKeyCountId(index)]]">0</span>)</paper-toggle-button>
              <paper-button class="reset-button" id="[[getKeyClearId(index)]]" on-click="clear">Reset</paper-button>
            </div>
          </template>
          <div class="mdl-card button-card">
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" on-click="addNewKey" disabled="[[shouldDisableAddNewKey(keyEventData)]]"><i class="material-icons">add</i></button>
          </div>
          <br class="visual-clear"/>
        </div>
      </div>
    </div>
    <!--end of holder class-->
    <paper-dialog id="addkeydialog">
    <h2>Select a key on your keyboard to train.</h2>
  </paper-dialog>
</template>
</main>
</div>
</dom-module>
